<template>
	<view class="refund u-skeleton" :style="{minHeight:screen + 'px'}">
		<u-navbar :titleStyle="{fontWeight:'bold'}" title="申请售后" />
		<view class="refund-content u-skeleton-fillet" :style="{paddingBottom:safeArea?(safeArea + 60) + 'px':'60px'}">
			<view class="refund-card">
				<view class="refund-totie u-skeleton-rect">售后商品</view>
				<order-item :route="false" mode="1" :item="details"/>
				<view class="refund-flex tp u-skeleton-rect" v-if="examine_mode!=0">
					<view class="refund-left">
						售后状态
					</view>
					<view class="refund-right show">
						{{examine_stats}}
					</view>
				</view>
				<view class="refund-flex show u-skeleton-rect" @click="mask_show = !mask_show" v-if="examine_mode==2">
					<view class="refund-left">
						快递信息
					</view>
					<view class="refund-right">
						点击上传物流信息
						<view class="refund-icon">
							<u-icon name="arrow-right" color="#999" size="15"></u-icon>
						</view>
					</view>
				</view>
				<view class="refund-flex show u-skeleton-rect" @click="mask_show = !mask_show" v-if="examine_mode==3">
					<view class="refund-left">
						驳回原因
					</view>
					<view class="refund-right">
						点击查看驳回原因
						<view class="refund-icon">
							<u-icon name="arrow-right" color="#999" size="15"></u-icon>
						</view>
					</view>
				</view>
				<view class="refund-flex show u-skeleton-rect" @click="selectChang('1')">
					<view class="refund-left">
						售后类型(必填)
					</view>
					<view class="refund-right">
						{{!form.type_intro?'请选择售后类型':form.type_intro==1?'退货退款':'仅退款'}}
						<view class="refund-icon">
							<u-icon name="arrow-right" color="#999" size="15"></u-icon>
						</view>
					</view>
				</view>
				<view class="refund-flex u-skeleton-rect" @click="selectChang('2')">
					<view class="refund-left">
						退款原因(必填)
					</view>
					<view class="refund-right">
						{{form.reason||'请选择退款原因'}}
						<view class="refund-icon">
							<u-icon name="arrow-right" color="#999" size="15"></u-icon>
						</view>
					</view>
				</view>
<!-- 				<view class="refund-flex">
					<view class="refund-left">
						退款金额
					</view>
					<view class="refund-right">
						￥ {{details_info.price}}
					</view>
				</view> -->
				<view class="refund-Upload u-skeleton-fillet">
					<view class="Upload-totie">上传描述和凭证</view>
					<view class="Upload-text u-skeleton-rect">
						<u-textarea :disabled="prohibit" height="80" :showConfirmBar="false" maxlength="-1" border="none" v-model="form.content"
							placeholder="补充描述,有助于商家更好的处理售后问题..."></u-textarea>
						<view>
							<view class="Upload-img">
								<view class="Upload-img-item" v-for="(item,index) in fileList5" :key="index">
									<u-image
										radius="5"
										:src="item.url"
										width="100%" height="180rpx"></u-image>
										<view class="Upload-img-delete" @click="deletePic(index)">
											<u-icon color="#FFCF4F" size="25" name="close-circle-fill"></u-icon>
										</view>
								</view>
							</view>
							<u-upload :previewImage="false" maxCount="6" :fileList="fileList5" @afterRead="afterRead" @delete="deletePic" name="6" multiple
								width="180rpx" height="180rpx">
								<view class="Upload-box">
									<view class="Upload-icon">
										<u-icon name="camera" color="#999" size="28"></u-icon>
									</view>
									<view class="Upload-texts">上传图片</view>
								</view>
							</u-upload>
						</view>
					</view>
				</view>
			</view>
		</view>
		<statusbar>
			<view class="refund-botem u-skeleton-circle">
				<button class="refund-button cu-btn" :disabled="prohibit" @click="submitChang">{{button_text}}</button>
			</view>
		</statusbar>
		<u-picker :show="show" :columns="columns" @cancel="show=!show" @confirm="pickerChang"></u-picker>
		<u-modal :show="mask_show" :title="examine_mode==2?'快递信息':'驳回原因'" confirmColor="#FFCF4F" showCancelButton @cancel="mask_show=false" @confirm="maskConfirm">
			<template #default>
				<template v-if="examine_mode==3">
					<view class="mask-text">驳回原因：{{back_content}}</view>
				</template>
				<template v-else>
					<view class="mask-item show">
						<view class="mask-name">快递公司：</view>
						<view class="mask-input">
							<u-input border="none" v-model="form.back_kd" placeholder="请输入快递公司名称"></u-input>
						</view>
					</view>
					<view class="mask-item">
						<view class="mask-name">快递单号：</view>
						<view class="mask-input">
							<u-input border="none" v-model="form.back_kd_no" placeholder="请输入快递单号"></u-input>
						</view>
					</view>
				</template>
			</template>
		</u-modal>
		<u-skelete :loading="loading" animation/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading:true,
				mask_show:false,
				show:false,
				columns:[['仅退款','退货退款']],
				listoen:[['仅退款','退货退款']
				],
				listthree:[['不想要了','商品不符预期','品质存在问题','实物与图片不符']
				],
				fileList5: [],
				mode:1,
				details:{
					goods_list:[]
				},
				form:{
					//售后类型
					type_intro:'',
					id:'',
					content:'',
					img:[],
					reason:'',
					back_kd:'',
					back_kd_no:''
				},
				logistics_list:[],
				back_content:''
			};
		},
		computed:{
			prohibit(){
				return (this.examine_mode==1 || this.examine_mode==4||this.examine_mode==2||this.examine_mode == 6||this.examine_mode==5)?true:false
			},
			details_info(){
				return this.details.goods_list[0] ||{}
			},
			examine_mode(){
				return this.details_info.is_back
			},
			button_text(){
				return this.details_info.is_back==1?'审核中':(this.details_info.is_back==4||this.details_info.is_back==6||this.examine_mode==5)?'售后完成':this.details_info.is_back==3?'重新提交':this.examine_mode==2?'请上传快递信息':'提交申请'
			},
			examine_stats(){
				return this.examine_mode==1?'审核中':this.examine_mode==2?'审核通过':this.examine_mode==3?'审核被驳回':'售后完成'
			}
		},
		onLoad(e){
			this.form.id = e.id || ''
			this.getAfterData()
		},
		methods:{
			maskConfirm(){
				if(this.examine_mode ==2){
					if(this.form.back_kd =='' || this.form.back_kd_no==''){
						this.$u.toast('请完善快递信息')
						return
					}
					uni.showModal({
						title: '提示',
						content: '确认提交?',
						success:  (res)=> {
							if (res.confirm) {
								this.Aftersubmit()
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
				this.mask_show = !this.mask_show
			},
			getAfterData(){
				this.$network('/api/order/backInfo',{
					id:this.form.id
				}).then(res=>{
					const { detail,logistics_list,refund} = res.data
					this.details.goods_list= []
					if(this.$u.test.object(refund)){
						let chek = ['type_intro','content','img','reason']
						this.back_content = refund.back_content
						for(let key in refund){
							if(chek.indexOf(key) > -1){
								this.form[key] = refund[key]
								if(key =='img'&&refund[key].length){
									this.fileList5 = []
									refund[key].map(item=>{
										this.fileList5.push({url:item})
									})
								}
							}
						}
					}
					this.details.goods_list.push(detail)
					if(this.examine_mode == 3){
						this.mask_show = !this.mask_show
					}
				}).finally((e) => {
					this.$nextTick(() => {
						setTimeout(() => {
							this.loading = false
						}, 600)
					})
				})
			},
			deletePic(e) {
				if(this.prohibit)return
				this.fileList5.splice(e,1)
			},
			afterRead(e) {
				if(this.prohibit)return
				const {
					url
				} = e.file[0]
				this.uploadFilePromise(url).then(res => {
					this.fileList5.push({
						url: res
					})
				})
			},
			submitChang(){
				if(this.form.type_intro=='' || this.form.reason==''){
					this.$u.toast('请完善售后资料')
					return
				}
				uni.showModal({
					title: '提示',
					content: '确认提交?',
					success:  (res)=> {
						if (res.confirm) {
							if(this.fileList5.length){
								this.form.img = this.fileList5.map(item=> item.url)
							}
							this.Aftersubmit()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				// setTimeout(()=>{
				// 	uni.navigateBack()
				// },800)
			},
			Aftersubmit(){
				this.$network('/api/order/salesAfterCreate',this.form).then(res=>{
					if(res.code == 1){
						this.$u.toast('提交成功')
						this.getAfterData()
					}
				})
			},
			selectChang(e){
				if(this.prohibit)return
				this.mode = e
				if(this.mode == 1){
					this.columns =  this.listoen
				}else if(this.mode == 2){
					this.columns =  this.listthree
				}
				this.show = !this.show
			},
			pickerChang(e){
				const { value} = e
				if(this.mode == 1){
					this.form.type_intro = value[0] == '仅退款'?2:1
				}else if(this.mode == 2){
					this.form.reason = value[0]
				}
				this.show = !this.show
			}
		}
	}
</script>

<style lang="scss">
	::v-deep .u-textarea {
		padding: 0 !important;
	}
	::v-deep .u-modal__title{
		padding-top: 10px !important;
		color: #FFCF4F !important;
	}
	::v-deep .u-modal__content{
		padding: 12px 10px 25px 10px !important;
		flex-direction:column !important;
	}
	.mask-item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		&.show{
			margin-bottom: 25rpx;
		}
		.mask-name{
			width: 25%;
			font-size: 28rpx;
			color: #FFCF4F;
		}
		.mask-input{
			flex: 1;
			background: #f9f9f9;
			padding: 10px;
			border-radius: 5px;
		}
	}
	.mask-text{
		font-size: 28rpx;
		color: #FFCF4F;
	}
	.Upload-img {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	
		.Upload-img-item {
			width: 31%;
			position: relative;
			margin-bottom: 15rpx;
			.Upload-img-delete{
				position: absolute;
				top: 3px;
				right: 3px;
			}
		}
	
		.Upload-img-item:last-child:nth-child(3n + 2) {
			margin-right: calc((100% - 31%) / 2 * 1);
		}
	}
	.refund-botem{
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.refund-button{
			width: 100%;
			height: 90rpx;
			background-color: #FFCF4F;
			padding: 0;
			margin: 0;
			color: #FFF;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 8px;
		}
	}
	.Upload-box{
		width: 150rpx;
		height: 130rpx;
		border: 1px dashed #999;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.Upload-texts{
			font-size: 28rpx;
			color: #999;
		}
	}
	page {
		background: #F5F5F5;
	}

	.refund-Upload {
		.Upload-totie {
			font-size: 28rpx;
			font-weight: bold;
			color: #000;
			margin-bottom: 35rpx;
		}

		.Upload-text {
			width: 100%;
			min-height: 200rpx;
			background: rgb(247, 247, 247);
			border-radius: 5px;
			padding: 20rpx;
		}
	}

	.refund-content {
		padding: 20rpx;

		.refund-card {
			width: 100%;
			background: #FFF;
			border-radius: 8px;
			padding: 20rpx;

			.refund-flex {
				margin-bottom: 35rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				&.tp{
					margin: 30rpx 0;
				}
				&.show {
					margin-top: 30rpx;
				}

				.refund-right {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #999;
					&.show{
						color: #FFCF4F;
						font-weight: bold;
					}
					.refund-icon {
						margin-left: 20rpx;
					}
				}

				.refund-left {
					font-size: 28rpx;
					color: #333;
				}
			}

			.refund-totie {
				font-size: 28rpx;
				font-weight: bold;
				color: #000;
				margin-bottom: 25rpx;
			}
		}
	}
</style>
